<template>
  <div :class="styles.page">
    <div :class="styles['login-area']">
      <!-- <p class="sys-title">固 井 数 据 管 理 系 统</p> -->
      <el-form :model="formData" status-icon ref="loginForm">
        <el-form-item prop="username" :rules="{ required: true, message: '请输入用户名', trigger: 'blur' }">
          <el-input type="text" v-model="formData.username" clearable placeholder='用户名'
                    prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        <el-form-item prop="password" :rules="{ required: true, message: '请输入密码', trigger: 'blur' }">
          <el-input type="password" v-model="formData.password" clearable placeholder='密码'
                    prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitLogin('loginForm')" style="width: 100%;" :loading="showLoginLoading">
            登录<span v-show="showLoginLoading">中...</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
    import styles from './login.scss'
    import {get, findKey} from 'lodash'
    import {login} from '@/api/module/login.js'
    import {COOKIE_LIST, UNIT_TYPE} from '@/util/constant'
    import {setCookie} from '@/util/help'

    export default {
        data() {
            return {
                styles,
                formData: {
                    username: '',
                    password: ''
                },
                showLoginLoading: false
            }
        },
        methods: {
            submitLogin(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.showLoginLoading = true
                        login(this.formData).then((res) => {
                            let token = get(res, 'data.token')
                            // 将登录人员的角色 存入 cookie，无角色默认为 工程师
                            setCookie('role', res.data.role || '工程师')
                            setCookie('navigation',res.data.navigation)
                            //alert(token)
                            if (token) {
                                setCookie(COOKIE_LIST.AUTHORIZATION, token)
                                setCookie(COOKIE_LIST.MENU, get(res, 'data.menu', []))
                                this.setUnitTypeCookie(get(res, 'data.data', []))
                                // 登录成功，跳转到 数据浏览 模块
                                this.$router.push('/data_classification')
                                // this.$router.push('/dashboard')
                            } else {
                                this.showLoginLoading = false
                                this.formData.password = ''
                                this.$message.error(get(res, 'data.msg', ''))
                            }
                        })
                    }
                })
            },
            setUnitTypeCookie(unitType) {
                let result = {}
                unitType.forEach((type) => {
                    let metaUnitCategory = findKey(UNIT_TYPE, function (o) {
                        return o === type['metaUnitCategory']
                    })
                    result[metaUnitCategory] = type['metaUnitCategoryValue']
                })
                setCookie(COOKIE_LIST.UNIT, result)
            }
        }
    }
</script>
<style scoped>
.sys-title{
    font-size: 24px;
    margin-bottom: 20px;
    font-family: 'STHeiti';
}
</style>